How to use ajax when I click draw in html to draw ticker name I choose
{% extends "base.html" %}
{% block head %}
<script src="/static/js/highcharts-custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// populate ticker with ticker list
var url = "/stock/getadjustedprices/BBC/";
$.ajax({
url: url,
dataType: 'JSON',
}).done(function(data) {
var obj = eval(data);
var prices = obj['prices'];
var dates = prices['date'];
var adj_prices = prices['close'];
var d_list = []
//alert(typeof(dates[0]));
for (i=0; i<dates.length; i++) {
d = new Date(dates[i]);
d_list.push(d);
}
var option1 = {
chart: {
renderTo: "chart",
plotBackGroundColor: 'Black',
plotBorderWidth: 1,
plotShadow: false,
rangeSelector: {
selected: 1
},
},
title: {
text: "My first technical chart",
},
xAxis: {
categories: d_list,
type: 'datetime',
labels: {
format: '{value:%m-%d}',
rotation: 45,
align: 'left'
},
tickInterval: 20,
},
yAxis: {
title: {
text: "Prices"
}
},
legend: {
enabled: false
},
plotOptions: {
line: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '{point.y:.1f}',
}
}
},
series: [{
type: 'line',
name: 'Price',
data: adj_prices,
}]
};
var chart = new Highcharts.Chart(option1)
});
});
</script>
<!--to position the chart_option div-->
<script type="text/javascript">
$(document).ready(function(){
$('#chart').mouseout(function () {
$('#chart_option').show();
})
// to hide the option panel
$('#hide_panel').click(function () {
$('#chart_option').hide();
})
})
</script>
<!--to populate the ticker list -->
<script>
$(document).ready(function(){
// populate ticker with ticker list
var url = "/stock/list/9/";
$.ajax({
url: url,
dataType: 'JSON',
}).done(function(data) {
var obj = eval(data);
var tk_list = obj['tk_list'];
$.each(tk_list, function (i, tk) {
$("#ticker").append($('<option>', {value: tk, text: tk}));
})
// alert(obj['tk_list']);
});
});
</script>
<style>
.option_row{
height: 30px;;
}
.left_col{
width: 65%;
padding-left: 8px;
text-align: left;
font-weight: bold;
}
.left_col_2 {
padding-left: 20px;
}
.right_col{
padding-right: 8px;
text-align: right;
}
</style>
{% endblock %}
{% block content %}
<div id='chart_option', style="width: 20%; height: 100%; float: left; background-color: #00be8c; z-index: 10; position: absolute">
<h3>CHART OPTIONS</h3>
<table style="padding-left: 8px; padding-right: 8px;">
<tr class="option_row">
<td class="left_col">Ticker:</td>
<td class="right_col"><select id="ticker"></select></td>
</tr>
<tr class="option_row">
<td class="left_col">Chart type:</td>
<td class="right_col">
<select id="chart_type">
<option>Line</option>
<option>Candle Stick</option>
</select>
</td>
</tr>
<tr class="option_row"><td colspan="2" class="left_col">Chart overlay:</td></tr>
<tr class="option_row">
<td colspan="2" style="text-align: right; padding-right: 8px;"><input type="checkbox" name="bollinger_bands" value="Boll"> Bollinger bands</td>
</tr>
<tr class="option_row">
<td colspan="2" class="left_col left_col_2">Moving average 1:</td>
</tr>
<tr class="option_row">
<td style="padding-left: 35px; text-align: left">Type</td>
<td style="text-align: right; padding-right: 8px;">
<select id="ma_type_1">
<option>SMA</option>
<option>WMA</option>
<option>EMA</option>
</select>
</td>
</tr>
<tr class="option_row">
<td style="padding-left: 35px; text-align: left">Number of days</td>
<td style="text-align: right; padding-right: 8px;">
<select id="no_days_1">
<option>5 days</option>
<option>10 days</option>
<option>14 days</option>
<option>20 days</option>
<option>25 days</option>
<option>50 days</option>
<option>200 days</option>
</select>
</td>
</tr>
<tr class="option_row">
<td colspan="2" class="left_col left_col_2">Moving average 2:</td>
</tr>
<tr class="option_row">
<td style="padding-left: 35px; text-align: left">Type</td>
<td style="text-align: right; padding-right: 8px;">
<select id="ma_type_2">
<option>SMA</option>
<option>WMA</option>
<option>EMA</option>
</select>
</td>
</tr>
<tr class="option_row">
<td style="padding-left: 35px; text-align: left">Number of days</td>
<td style="text-align: right; padding-right: 8px;">
<select id="no_days_2">
<option>5 days</option>
<option>10 days</option>
<option>14 days</option>
<option>20 days</option>
<option>25 days</option>
<option>50 days</option>
<option>200 days</option>
</select>
</td>
</tr>
<tr class="option_row">
<td colspan="2" class="left_col left_col_2">Moving average 3:</td>
</tr>
<tr class="option_row">
<td style="padding-left: 35px; text-align: left">Type</td>
<td style="text-align: right; padding-right: 8px;">
<select id="ma_type_3">
<option>SMA</option>
<option>WMA</option>
<option>EMA</option>
</select>
</td>
</tr>
<tr class="option_row">
<td style="padding-left: 35px; text-align: left">Number of days</td>
<td style="text-align: right; padding-right: 8px;">
<select id="no_days_3">
<option>5 days</option>
<option>10 days</option>
<option>14 days</option>
<option>20 days</option>
<option>25 days</option>
<option>50 days</option>
<option>200 days</option>
</select>
</td>
</tr>
<tr class="option_row">
<td colspan="2" style="text-align: right; padding-right: 8px;"><input id="SAR" type="checkbox" name="SAR" value="SAR"> Parabolic SAR</td>
</tr>
<tr class="option_row"><td colspan="2" class="left_col">Supplementary charts:</td></tr>
<tr class="option_row">
<td colspan="2" style="text-align: right; padding-right: 8px;">
<input id="MACD" type="checkbox" name="MACD" value="SAR"> MACD
<input id="RSI" type="checkbox" name="RSI" value="RSI"> RSI
<input id="VOL" type="checkbox" name="VOL" value="VOL"> Volume
<input id="MFI" type="checkbox" name="MFI" value="MFI"> MFI
</td>
</tr>
<tr class="option_row">
<td colspan="2" style="text-align: center; width: 50%">
<input id="draw" class="btn btn-primary" type="submit" value="DRAW" style="margin-right: 15px">
<input id="hide_panel" class="btn btn-primary" type="submit" value="HIDE PANEL">
</td>
</tr>
</table>
</div>
<h2>STOCK CHART</h2>
<div id="chart" style="width:100%; height:100%;">
</div>
{% endblock %}